
<template>
  <div  :style='size'>
    <div id='warternum'>
      <div class="watername">
        <img class="waterimg" v-bind:src="watername" />
      </div>
      <div class="columnline"></div>
      <div class="num">{{num}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'warternum',
    data () {
      return {
        size: {
          width: '100%',
          height: '100%'
        },
        wclass: '正常',
        watername: '',
        num: 100
      }
    },
    props: {
      wname: String,
      wnum: String
    },
    mounted () {
      this.watername = this.wname
      this.num = this.wnum
    },
    computed: {},
    watch: {
      wnum () {
        this.num = this.wnum
      }
    }
  }
</script>
<style scoped>
  #warternum{
    width: 100%;
    height: calc(100% - 2px);
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    border-bottom: 1px solid #7ECEF4;
  }
  .watername{
    width: auto;
    height: 100%;
    color: #E1F0FB;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
  .waterimg{
    height: 70%;
    width: auto;
  }
  .num{
    width: 35%;
    height: 70%;
    font-size: 26px;
    font-weight:bold;
    color: #6DBFFE;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .columnline{
    width: 10%;
    height: 100%;
  }
</style>
